<template>
	<view class="uploadimage-container">
		<u-upload 
		  :fileList="fileList"
		  @afterRead="afterRead"
		  @delete="deletePic"
		  name="uploadImage"
		  multiple
		  :maxCount="1"
		  width="150"
		  height="150"
		>
		  <view class="bg">
			  <image
			    :src="uploadBgImage"
			    mode="widthFix"
			  	class="bgImage"
			    style="width: 100px;height: 50px;"
			  ></image>
			  <view class="bg-span">选择图片</view>
		  </view>
		</u-upload>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fileList: [],
			// 背景图
			uploadBgImage: require('./images/upload_add.svg')
		}
	},
	methods: {
		deletePic(event) {
			 this.fileList.splice(event.index, 1);
		},
		afterRead(event) {
			let lists = [].concat(event.file);
			console.log(lists);
			this.fileList = lists;
			this.$emit("chooseImage", this.fileList)
		},
	}
}
</script>

<style lang="scss" scoped>
.uploadimage-container {
	margin: 30px 0;
	/deep/ .u-upload {
		align-items: center !important;
	}
}
	
	
@keyframes MOVE-UpDown {
	0% { 
		transform: translateY(-4px);
	}
	100% {
	    transform: translateY(4px);
	}
}
.bg {
 	margin: 0 auto; 
	.bgImage {
		animation: MOVE-UpDown 1s ease infinite alternate;
	}
	.bg-span {
		color: #000;
		font-size: 18px;
		text-align: center;
		font-weight: bold;
	}
}

</style>